<template>
  <div class="employee-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="企业名称：">
        <el-input v-model="params.enterpriseName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-date-picker
        v-model="value"
        value-format="yyyy-MM-dd"
        style="margin-right:20px"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        @change="setTime1"
      />
      <el-form-item>
        <el-button type="primary" @click="doSearch">查询</el-button>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="primary" @click="addPropety">添加账单</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="propetyList">
        <el-table-column label="序号" width="70" prop="id" />
        <el-table-column label="账单编号" width="200" prop="billNumber" />
        <el-table-column label="企业名称" width="270" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" width="160" prop="buildingName" />
        <el-table-column label="物业费" width="130" prop="propertyFeePrice" />
        <el-table-column label="账单金额" prop="paymentAmount" />
        <el-table-column label="缴费时间" prop="startTime" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" @click="view(scope.row.id)">查看</el-button>
            <el-button size="mini" type="text" @click="delHandel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 切换分页 -->
    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        :page-size="params.pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog
      title="查看账单"
      :visible="rentDialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <!-- 详情弹框 -->
      <el-descriptions title="账单信息" :model="viewForm">
        <el-descriptions-item label="租户名称">{{ viewForm.enterpriseName }}</el-descriptions-item>
        <el-descriptions-item label="租赁楼宇">{{ viewForm.buildingName }}</el-descriptions-item>
        <el-descriptions-item label="缴费周期">{{ viewForm.startTime }}至{{ viewForm.endTime }}</el-descriptions-item>
        <el-descriptions-item label="物业费(元/m²)">{{ viewForm.propertyFeePrice }}</el-descriptions-item>
        <el-descriptions-item label="账单金额(元)">{{ viewForm.paymentAmount }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ viewForm.paymentMethodValue }}</el-descriptions-item>
        <el-descriptions-item label="缴费时间">{{ viewForm.createTime }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button size="mini" @click="rentDialogVisible=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="rentDialogVisible=false">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加账单"
      :visible="dialogVisible"
      width="580px"
      @close="dialogVisible=false"
      @click="dialogVisible=true"
    >

      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm">
          <el-form-item label="选择租户" prop="enterpriseId">
            <el-select v-model="addForm.enterpriseId" placeholder="请选择租户">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="addForm.buildingId" placeholder="请选择租赁楼宇">
              <el-option
                v-for="item in bulidingList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="缴费周期" prop="time">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="setTime2"
            />
          </el-form-item>
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input v-model="addForm.paymentAmount" disabled />
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="addForm.paymentMethod" placeholder="请选择支付方式">
              <el-option
                v-for="item in paymentMethodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="addSubmit"
        >确 定</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { getPropetyAPI, getDetailAPI, delPropetyAPI, getEnterpriseListAPI, getBulidingListAPI, getPaymentAPI, addPropetyAPI } from '@/api/propety'
export default {
  name: 'Propety',
  data() {
    return {
      propetyList: [
        {
          billNumber: null,
          buildingId: null,
          buildingName: '',
          createTime: '',
          enterpriseName: '',
          id: '',
          paymentAmount: null,
          paymentMethod: null,
          propertyFeePrice: null,
          startTime: ''
        }
      ],
      params: {
        page: 1,
        pageSize: 10,
        enterpriseName: '',
        end: '',
        start: ''
      },
      viewForm: {},
      addForm: {
        enterpriseId: null,
        buildingId: null,
        startTime: '',
        endTime: '',
        paymentAmount: null,
        paymentMethod: null
      },
      value: [], // 搜索用
      value1: [], // 添加用
      total: 0,
      rentDialogVisible: false,
      dialogVisible: false,
      bulidingList: [],
      enterpriseList: [],
      paymentMethodList: [
        { value: 1, label: '微信' },
        { value: 2, label: '支付宝' },
        { value: 3, label: '现金' }
      ]
    }
  },
  mounted() {
    this.getPropetyList()
    this.getEnterpriseList()
    this.getBulidingList()
  },
  methods: {
    // 获取列表信息
    async getPropetyList() {
      const res = await getPropetyAPI(this.params)
      console.log(res)
      this.propetyList = res.data.rows
      this.total = res.data.total
    },
    // 切换分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.getPropetyList()
    },
    // 搜索框
    doSearch() {
      this.params.page = 1
      this.getPropetyList()
    },
    // 关闭详情弹窗
    closeDialog() {
      this.rentDialogVisible = false
    },
    // 关闭添加
    closeAdd() {
      this.dialogVisible = false
      this.addForm = {}
      this.$refs.addForm.resetFields()
    },
    // 显示弹框
    async view(id) {
      this.rentDialogVisible = true
      const res = await getDetailAPI(id)
      console.log(res)
      this.viewForm = res.data
    },
    // 删除功能
    async delHandel(id) {
      this.$confirm('确认删除当前账单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPropetyAPI(id)
        this.getPoleList()
      }).catch(() => {

      })
    },
    // 添加功能
    addPropety() {
      this.dialogVisible = true
    },
    // 搜索日期
    setTime1() {
      this.params.start = this.value[0]
      this.params.end = this.value[1]
    },
    // 添加日期
    async setTime2() {
      this.addForm.startTime = this.value1[0]
      this.addForm.endTime = this.value1[1]
      // 获取日期
      const { buildingId, startTime, endTime } = this.addForm
      const val = { buildingId, startTime, endTime }
      const res = await getPaymentAPI(val)
      // console.log(res)
      this.addForm.paymentAmount = res.data
    },
    // 获取公司列表
    async getEnterpriseList() {
      const res = await getEnterpriseListAPI()
      this.enterpriseList = res.data
    },
    // 获取楼宇列表
    async getBulidingList() {
      const res = await getBulidingListAPI()
      this.bulidingList = res.data
    },
    // 点击提交按钮
    async addSubmit() {
      await addPropetyAPI(this.addForm)
      this.closeAdd()
      this.getPropetyList()
    }

  }
}
</script>

<style lang="scss" scoped></style>

